<template>
	<el-tabs v-model="activeName" class="spot-pay-form-center-tabs">
		<el-tab-pane label="限价单" name="first">
			<div class="pt-10px pb-10px pl-10px pr-10px">
				<p class="text-#86909C text-12px">价格(USDT)</p>
				<div class="mt-10px mb-10px">
					<el-input-number v-model="dataForm.price" :precision="2" :step="0.01" :min="0" placeholder="价格"
						class="input-spot-form" />
				</div>
				<p class="text-#86909C text-12px">数量(BTC)</p>
				<div class="mt-10px mb-30px">
					<el-input-number v-model="dataForm.account" :precision="2" :step="0.01" :min="0" placeholder="数量"
						class="input-spot-form" />
				</div>
				<!-- 步骤条 -->
				<div class="w-100%">
					<el-steps style="width: 100%;" :active="2" class="spot-from-steps">
						<el-step title="0" />
						<el-step title="25%" />
						<el-step title="50%" />
						<el-step title="75%" />
						<el-step title="100%" />
					</el-steps>
				</div>
				<!-- 金额 -->
				<p class="text-#86909C text-12px mt-10px">金额(USDT)</p>
				<div class="mt-10px mb-10px">
					<el-input placeholder="99.900" style="height: 50px;" class="spot-from-input"></el-input>
				</div>
				<!--  -->
				<div class="text-12px">
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#86909C">可用</p>
						<div class="flex items-center justify-between">
							<p class="mr-10px">0.00 USDT</p>
							<img src="/transaction/spot/add-blue-fill.svg" alt="" class="w-14px h-14px">
						</div>
					</div>
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#86909C">可用</p>
						<div class="flex items-center justify-between">
							--BTC
						</div>
					</div>
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#86909C">预估手续费</p>
						<div class="flex items-center justify-between">
							--BTC
						</div>
					</div>
				</div>

				<div class="mt-50px">
					<el-button type="primary" color="#07B175" style="height: 50px;font-size:18px;width: 100%;" @click="confirmationBoxShow=true">
						买入BTC
					</el-button>
				</div>
			</div>
		</el-tab-pane>
		<el-tab-pane label="市价单" name="second">
			<div class="pt-10px pb-10px pl-10px pr-10px">
				<p class="text-#86909C text-12px">价格(USDT)</p>
				<div class="mt-10px mb-10px">
					<el-input-number v-model="dataForm.price" :precision="2" :step="0.01" :min="0" placeholder="价格"
						class="input-spot-form" />
				</div>
				<p class="text-#86909C text-12px">数量(BTC)</p>
				<div class="mt-10px mb-30px">
					<el-input-number v-model="dataForm.account" :precision="2" :step="0.01" :min="0" placeholder="数量"
						class="input-spot-form" />
				</div>
				<!-- 步骤条 -->
				<div class="w-100%">
					<el-steps style="width: 100%;" :active="2" class="spot-from-steps">
						<el-step title="0" />
						<el-step title="25%" />
						<el-step title="50%" />
						<el-step title="75%" />
						<el-step title="100%" />
					</el-steps>
				</div>
				<!-- 金额 -->
				<p class="text-#86909C text-12px mt-10px">金额(USDT)</p>
				<div class="mt-10px mb-10px">
					<el-input placeholder="99.900" style="height: 50px;" class="spot-from-input"></el-input>
				</div>
				<!--  -->
				<div class="text-12px">
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#86909C">可用</p>
						<div class="flex items-center justify-between">
							<p class="mr-10px">0.00 USDT</p>
							<img src="/transaction/spot/add-blue-fill.svg" alt="" class="w-14px h-14px">
						</div>
					</div>
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#86909C">可用</p>
						<div class="flex items-center justify-between">
							--BTC
						</div>
					</div>
					<div class="flex items-center justify-between mb-10px">
						<p class="text-#86909C">预估手续费</p>
						<div class="flex items-center justify-between">
							--BTC
						</div>
					</div>
				</div>

				<div class="mt-50px">
					<el-button type="primary" color="#07B175" style="height: 50px;font-size:18px;width: 100%;">
						买入BTC
					</el-button>
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>
	<NoticeBox :is-show="noticeBoxShow" @close="closeNoticeBox">
		<template #default>
			<div class="ml-20px">
				<div v-if="activeName === 'first'">
					<p class="text-18px text-#ffffff">限价卖出单已生成</p>
					<p class="text-16px text-#B5B5B5 mt-10px">您卖出0.025个ETH的限价订单已经生成</p>
				</div>
				<div v-if="activeName === 'second'">
					<p class="text-18px text-#ffffff">市价卖出单已生成</p>
					<p class="text-16px text-#B5B5B5 mt-10px">您卖出0.025个ETH的市价订单已经生成</p>
				</div>
			</div>
		</template>
	</NoticeBox>
	<ConfirmationBox :is-show="confirmationBoxShow" @close="closeConfirmationBox" coin="BTC/USDT"
	icon="/purchase/btc.svg" to="pay" price="11.00 USDT"
	amount="11.00 BTC" methods="限价">
	</ConfirmationBox>
</template>
<script lang="ts" setup>
import NoticeBox from './NoticeBox.vue';
import ConfirmationBox from './ConfirmationBox.vue';


const activeName = ref<any>('first');
const dataForm = ref<any>({
	price: null,
	account: null,
	rate: null,
	amount: null
});

const noticeBoxShow = ref<boolean>(false);
const closeNoticeBox = (val: any) => {
	noticeBoxShow.value = val;
};

const confirmationBoxShow = ref<boolean>(false);
const closeConfirmationBox = (val: any) => {
	confirmationBoxShow.value = val;
};
</script>
<style lang="scss" scoped>
.spot-from-input {
	font-size: 18px;
	--el-input-bg-color: #202020;
	--el-input-border-color: #202020;
	--el-input-focus-border: #202020;
	--el-input-hover-border: #202020;
	--el-input-focus-border-color: #202020;
	--el-input-hover-border-color: #202020;
}
</style>
<style lang="scss">
.spot-pay-form-center-tabs {
	.el-tabs__nav-wrap:after {
		height: 1px;
		background-color: #202020;
	}

	.el-tabs__header {
		margin-bottom: 0;

		.el-tabs__nav-wrap {
			height: 100%;
		}

		.el-tabs__nav-scroll {
			padding-left: 10px;
			padding-top: 10px;
			color: #FFFFFF;

			.el-tabs__item {
				// padding-top: 16px;
				padding-bottom: 10px;
				font-size: 14px;
				color: #B5B5B5;
			}

			.is-active {
				color: #FFFFFF;
			}
		}

		.el-tabs__active-bar {
			height: 2px;
			background-color: #114CEE;
		}
	}
}

.input-spot-form {
	width: 100%;
	height: 50px;
	background: #202020;

	.el-input {
		--el-input-border-color: #202020;
		--el-input-focus-border: #202020;
		--el-input-hover-border: #202020;
		--el-input-focus-border-color: #202020;
		--el-input-hover-border-color: #202020;
	}

	.el-input-number__decrease,
	.el-input-number__increase {
		border: none;
		width: 26%;
		background: #202020;
	}

	.el-icon {
		font-size: 16px;
		color: #7E7F84;
	}

	.el-input__wrapper {
		background: #202020;
	}

	.el-input__inner {
		font-size: 16px;
	}
}

.spot-from-steps {

	.el-step__title,
	.is-finish {
		color: #86909C;
		font-size: 12px;
	}

	.el-step__icon-inner {
		display: none;
	}

	.el-step__icon,
	.is-text {
		background-color: #202020;
	}

	.el-step__icon {
		border-color: #707070;
	}

	.is-finish {
		.el-step__icon {

			border-color: #fff;
		}
	}

	.el-step__line-inner {
		height: 4px !important;
		background-color: #ffffff !important;
		border: none;
	}

	.el-step__line {
		height: 4px !important;
		background-color: #272727;
	}
}
</style>
